<template>
  <!-- 收货地址 -->
  <uni-popup ref="popup" type="bottom" background-color="#fff" :showClose="true">
    <view class="address-panel">
      <!-- 标题 -->
      <view class="title"
        >配送至
        <!-- 关闭按钮 -->
        <view class="close" @click="closePopup">×</view></view
      >
      <!-- 内容 -->
      <view class="content">
        <view
          class="item"
          v-for="item in addressList"
          :key="item.id"
          @click="selectAddress(item, item.id)"
        >
          <view class="user">{{ item.receiver + ' ' + item.contact }}</view>
          <view class="address">{{ item.fullLocation + item.address }}</view>
          <text
            class="icon"
            :class="{
              'icon-checked': selectAddressId === item.id,
              'icon-ring': selectAddressId !== item.id,
            }"
          ></text>
        </view>
      </view>
      <view class="footer">
        <navigator url="/pagesMember/address-form/address-form" class="button primary">
          新建地址
        </navigator>
        <view v-if="false" class="button primary">确定</view>
      </view>
    </view>
  </uni-popup>
</template>

<script lang="ts" setup>
import type { addressInfoType } from '@/types/address'
import { ref } from 'vue'
const emits = defineEmits(['getAddress'])
const popup = ref()
// 地址列表
const addressList = ref<addressInfoType[]>([] as addressInfoType[])
// 选择出来的地址的id
const selectAddressId = ref('')
// 打开弹出层的回调
const open = (data: addressInfoType[], id: string = '') => {
  addressList.value = data
  selectAddressId.value = id
  popup.value.open()
}
// 点击关闭对话框
const closePopup = () => {
  popup.value.close()
}
// 选择地址图标的回调
const selectAddress = (address: addressInfoType, id: string) => {
  // 将选中的地址传递给父组件
  emits('getAddress', { address, id })
  selectAddressId.value = id
  // 关闭弹出层
  closePopup()
}

// 将函数暴露出去
defineExpose({
  open,
})
</script>

<style lang="scss">
.address-panel {
  padding: 0 10rpx;
  border-radius: 10rpx 10rpx 0 0;
  position: relative;
  background-color: #fff;
  .title {
    position: relative;
    height: 120rpx;
    line-height: 120rpx;
    text-align: center;
    border-bottom: 1px solid #ddd;
    .close {
      position: absolute;
      top: 0rpx;
      right: 10rpx;
      font-size: 48rpx;
      color: #666;
    }
  }
  .content {
    min-height: 300rpx;
    max-height: 540rpx;
    overflow: auto;
    padding: 20rpx;
    .item {
      padding: 30rpx 50rpx 30rpx 60rpx;
      background-size: 40rpx;
      background-repeat: no-repeat;
      background-position: 0 center;
      background-image: url(../../../static/images/address.png);
      position: relative;
    }
    .icon {
      color: #999;
      font-size: 40rpx;
      transform: translateY(-50%);
      position: absolute;
      top: 50%;
      right: 0;
    }
    .icon-checked {
      color: #ff0034;
    }
    .icon-ring {
      color: #444;
    }
    .user {
      font-size: 28rpx;
      color: #444;
      font-weight: 500;
    }
    .address {
      font-size: 26rpx;
      color: #666;
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0 40rpx;
    font-size: 28rpx;
    color: #444;

    .button {
      flex: 1;
      height: 72rpx;
      text-align: center;
      line-height: 72rpx;
      margin: 0 20rpx;
      color: #fff;
      border-radius: 72rpx;
    }

    .primary {
      color: #fff;
      background-color: #ff0034;
    }

    .secondary {
      background-color: #ffa868;
    }
  }
}
</style>
